import React, {Component} from 'react';

export class Counter extends Component {
    static displayName = Counter.name;

    constructor(props) {
        super(props);
        this.state = {currentCount: 0};
        this.incrementCounter = this.incrementCounter.bind(this);
        this.decrementCounter = this.decrementCounter.bind(this);
    }

    incrementCounter() {
        this.setState((state) => {
            return {
                currentCount: state.currentCount + 1
            }
        });
    }

    decrementCounter() {
        this.setState((state) => {
            return {
                currentCount: state.currentCount - 1
            }
        });
    }

    render() {
        return (
            <div>
                <h1>Counter</h1>
                <p>This is a simple example of a React component.</p>
                <p aria-live="polite">Current count: <strong>{this.state.currentCount}</strong></p>
                <button className="btn btn-primary" onClick={this.incrementCounter}>Increment</button>
                &nbsp;
                <button className="btn btn-danger" onClick={this.decrementCounter}>Decrement</button>
            </div>
        );
    }
}